<template>
  <div id="app">
    <itemhead :movieObj="movieobj" :myimg="myImg"></itemhead>
		<itembody :movieObj="movieobj" :myimg="myImg"></itembody>
  </div>
</template>

<script>
import itemhead from "../components/item/item-heard.vue";
import itembody from "../components/item/item-body.vue"
import axios from 'axios';

export default {
  name: "item",
	data () {
		return {
			movieobj:{},
			myImg:""
		}
	},
	mounted(){
		let id = this.$route.params.id
		axios({
			method:"get",
			url:`/api/mtrade/mmdb/movie/v5/${id}.json`
		}).then(res=>{
			this.movieobj = res["data"]["data"]["movie"]
			this.movieobj.img = this.movieobj.img.replace("w.h","148.208");
			this.myImg = `background-image: url(${this.movieobj.img})`
		})
	},
  components: {
    itemhead,
		itembody
  },
};
</script>

<style scoped>
.one {
  width: 100%;
	height: 110px;
  display: flex;
}

.two {
	flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: #f5f5f5;
  overflow: scroll;
}

</style>